<template>
  <div ref="temperatureRef" style="height: 460px;"></div>
</template>

<script setup name="TemperatureChart">
import { ref, reactive } from 'vue'
import * as echarts from "echarts"
import { getPreviousTimesByInterval } from "@/utils/index"
// 获取节点
let temperatureRef = ref();
//获取实时数据
function updateTime() {
  init()
}


onMounted(() => {
  // updateTime(); // 1s = 10000ms, 10s = 100000
  // 每隔1分钟执行一次updateTime函数
  const intervalId = setInterval(updateTime, 5000);
  // 将 intervalId 保存起来，以便在组件卸载时清除定时器
  window['intervalId'] = intervalId;
  init()
})

function init() {
   //获取echarts实例
  const myCharts = echarts.init(temperatureRef.value);
  const { times, randomNum } = getPreviousTimesByInterval(1, 10);
  myCharts.setOption({
    //标题
    // title: {
    //   text:'施工方'
    // },
    tooltip: {
      trigger: 'axis', // 触发类型：坐标轴触发
      axisPointer: {
        type: 'line' // 指示器类型：直线指示器
      }
    },
    xAxis: {
      type: 'category',
      data: times,
      boundaryGap: false,
      boundaryGap: false,
      axisTick: {
        show: true,    // 是否显示坐标轴刻度
        lineStyle: {
          width: 1, // 设置加粗的宽度
          color: "#0c8cab" // 设置颜色渐变
        }
      },
      axisLine: {
        show: true, // 是否显示坐标轴轴线
        lineStyle: {
          width: 1, // 设置加粗的宽度
          color: "#143d53" // 设置颜色渐变
        }
      },
      axisLabel: {
        color: "#fff",
        fontSize:'16',
      }
    },
    yAxis: {
      name: '单位（摄氏度）',
      nameTextStyle: {
        color: "#fff",
        nameLocation: "start",
      },
      color:'#fff',
      type: 'value',
      axisLabel: {
        formatter: '{value} °C',
        color: "#fff",
        fontSize:'16',
      },
      splitLine:{
        lineStyle:{
          type: 'dashed', //网格为虚线
          color: '#206987'
        }
      }
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "6%",
      top:"20%",
      containLabel: true,
    },
    series: [
      {
        data: randomNum,
        type: 'line',
        // symbol: 'circle', // 设置为圆形标记
        smooth: true,
        symbolSize: 10, // 设置标记的大小
        color:["#3980da"],
        lineStyle: { color: '#3980da', width: 2 },
        // itemStyle: {
        //   borderWidth: 3,
        //   borderColor: '#387acb',
        //   color: 'ffffff',
        // },
        // 数值展示
        label:{
          show: true, // 是否展示
          position: 'top', // 展示位置
          color: '#fff', // 展示颜色
          fontSize: 16, // 展示文字大小
          formatter: '{c} °C', // 展示文字格式
        },
        //渐变
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
            [
              {offset: 0, color: '#27568a'},
              {offset: 0.5, color: '#19435c'},
              {offset: 1, color: '#051827'}
            ]
          )
        }
      }
    ]
  })
}

onUnmounted(() => {
  if (window['intervalId']) {
    clearInterval(window['intervalId']);
  }
});
</script>

<style lang='scss' scoped>

</style>